<!-- todo: 添加响应式 -->
<!--这是物料渲染器-->
<template>
  <div>
    <component :is="material" :material="materialType"></component>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';

import TextMaterial from "@/material/internal/TextMaterial.vue"
import ChartMaterial from "@/material/internal/ChartMaterial.vue"
import ImageMaterial from "@/material/internal/ImageMaterial.vue"
import FallbackMaterial from "@/material/internal/FallbackMaterial.vue";
import ContainerMaterial from "@/material/internal/ContainerMaterial.vue";
import {MaterialType} from "@/types/material.type";

// 使用 defineProps 来解构并定义你期望从父组件接收的属性
const {materialType} = defineProps<{materialType: MaterialType}>();
let material:any =  computed(()=>{
  let material:any;
  // 物料的插件化就不用写switch了，因为是基于插件化协议的数据
  switch (materialType.type) {
    case 'text':
      material = TextMaterial;
      break;
    case 'text03c':
      material = TextMaterial;
      break;
    case "chart":
      material = ChartMaterial;
      break;
    case "image":
      material = ImageMaterial;
      break;
    case "container":
      material = ContainerMaterial;
      break;
    default:
      material = FallbackMaterial;
      break;
  }
  return material;
});
</script>

<style scoped>
</style>
